<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <span>分类管理</span>
      </div>
      <h3>乐居分类:</h3>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card shadow="always" :body-style="{ padding: '20px' }">
            <div slot="header">
              <span>创意</span>
            </div>
            <div class="img">
              <img
                src="https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/2021090311113795422.jpg"
                alt=""
              />
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always" :body-style="{ padding: '20px' }">
            <div slot="header">
              <span>风格</span>
            </div>
            <div class="img">
              <img
                src="https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20201113162204152fengge.png"
                alt=""
              />
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always" :body-style="{ padding: '20px' }">
            <div slot="header">
              <span>饰品</span>
            </div>
            <div class="img">
              <img
                src="https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20201113162219971zhuangshipin.png"
                alt=""
              />
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always" :body-style="{ padding: '20px' }">
            <div slot="header">
              <span>灯具</span>
            </div>
            <div class="img">
              <img
                src="https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20201118165103745dengju.png"
                alt=""
              />
            </div>
          </el-card>
        </el-col>
      </el-row>

      <h3>全部分类:</h3>

      <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
      >
        <el-table-column prop="name" label="菜单名称" sortable>
        </el-table-column>
        <el-table-column prop="icon" label="菜单名称"> 
          <template slot-scope="props">
            <img class="img-icon" :src="props.row.icon" alt="">
          </template>
        </el-table-column>
        <el-table-column prop="name" label="分类名字"> </el-table-column>
        <el-table-column prop="sort" label="排序" sortable> </el-table-column>
        <el-table-column prop="showStatus" label="显示状态"> </el-table-column>
        <el-table-column prop="navStatus" label="导航栏展示"> </el-table-column>
        <el-table-column prop="description" label="描述"> </el-table-column>
        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getAllCategory } from "@/api/product/produceClassify/produceClassify.js";
export default {
  data() {
    return {
      tableData: [],
    };
  },
  methods: {
    init() {
      var obj = {};
      var arr = [];
      getAllCategory().then((res) => {
        if (res.success) {
          // this.tableData = res.data.items;
          res.data.items.forEach((el) => {
            obj = el.category;
            obj.children = el.children;
            arr.push(obj);
          });
          this.tableData = arr;
          console.log(this.tableData);
        } else {
          this.$message.error(res.message);
        }
      });
    },
  },
  created() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>
.img {
  display: flex;
  img {
    width: 245px;
    height: 300px;
    margin: auto;
  }
}
.img-table {
  width: 60px;
  height: 60px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
>>> .el-table__expanded-cell {
  padding: 0 !important;
}
.img-icon{
  width: 60px;
  height: 60px;
}
</style>